今天大概會聊到的範圍

• Testing

Compose 的 Test 屬於 UI Test ，在執行時需要啟動模擬器或是 run 在實機上。在使用上，就像其他的 UI Test 工具( ex. Espresso, Selenium) 很像：先在畫面上找到目標、對目標進行操作、檢查操作結果

環境配置

在開始 Compose Test 之前，別忘了引入相關的 library

androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"

ui-test-junit4 是主要的測試 library。另外當 Compose test 執行時，會將要測試的 Composable 放入 "ComponentActivity" 並用 Intent 將其啟動。所以我們要在 Manifest 中加上 ComponentActivity 的定義，因此我們加上 ui-test-manifest 來幫忙完成這個任務。

在 /androidTest 中，我們建立一個測試 class

class SimpleCompTest {
    
    // 1    
    @get:Rule
    val composeTestRule = createComposeRule()
    
    @Test
    fun test_when_SimpleComp_click_should_display() {
        // 2
        composeTestRule.setContent {
            SimpleComp()
        }
        
        composeTestRule.onNodeWithText("Click Me", ignoreCase = true).performClick()
        composeTestRule.onNodeWithText("Perfect").assertIsDisplayed()
    }
    
    
}

1. Compose Test 使用 createComposeRule() 來建立一個 TestRule
2. 在測試開始前，先用 composeTestRule.setContent 定義要測試的內容。setContent 做的事情就和 Activity.setContent 一樣，將畫面擺進 Activity 中。這邊使用的 Activity 就是前面提到的 ComponentActivity。若希望使用自己的 Activity，則改用 createAndroidComposeRule 並定義要使用的 Activity：

@get:Rule
val composeTestRule = createAndroidComposeRule<MyActivity>()

找到目標

compose test 提供一系列的工具，方便我們在畫面上找尋我們要互動的元件。主要分成 Finder 和 Matcher 兩個角色：

• Finder：負責找到元件的，可以定義要找的是一個 or N 個元件
• Matcher：查找的條件

@Composable
fun TestComp() {
    Text("One", color = Color.Red)
    Text("Two", color = Color.Blue)
    Text("Three", color = Color.Green)
    Text("Four", color = Color.Cyan)
}

@Test
fun test_TestComp() {
    composeTestRule.setContent {
        TestComp()
    }
    
    composeTestRule.onNodeWithText("One")     // 1. 
    
    composeTestRule.onNode(hasText("One"))    // 2.
    
}

1. onNodeWithText 就是一個常用的 Finder，他可以找到 Text or TextField 包含對應的字樣
2. onNode 是泛用的 Finder，他可以吃一個 Matcher。hasText 就是一個負責找到包含對應文字的元件的 Matcher

對目標進行操作

找到目標後，我們可以對他進行操作：

onNode(...).performClick()        // 對找到的 Node 進行點擊
onNode(...).perforTextInput(...)    // 輸入文字

除了進行一些常見的操作外，還可以對 Node 進行一個 or N 個手勢操作

onNode(...).performGesture { 
    click()
    swipeUp()
    ...
}

檢查操作結果

最後要提到的 assertion，最基本的檢查是檢查元件是否存在

onNode(...).assertIsDisplayed()

當然，還有很多 assertion 可以使用。例外還有通用的 assert() function

onNode(...).assert( <matcher> ) 

Cheat Sheet

有這麼多的 Finder、Matcher、Action 和 Assertion ，誰記得了那麼多啊？好加在 Google 很貼心的將這個 Compose Testing framework 的常用功能整理成一張小抄，方便我們在開發的時候對照：